/**
 * Created by asus on 2016/11/23.
 */
import React, { Component,StyleSheet} from 'react';

export default class AllOrderList extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            index:0
        };
    }

    async componentWillMount() {
        const {index} = this.props
        await this.setState({index:index?index:0})
    }

    onClick(index){
        const {onClick} = this.props
        this.setState({index:index})
        onClick&&onClick(index)
    }

    render(){
        const {contents} = this.props
        return(
            <div className='tabBarContainer oa width100' style={{height:40}}>
                <ul className="flex" style={{width:'100%'}}>
                    {
                        contents&&contents.map((el,index)=>{
                            return(
                                <li
                                    className={"border_bottom"}
                                    onClick={()=>this.onClick(index)}
                                    style={this.state.index==index?styles.onfocus:styles.onblur}
                                >
                                    {el}
                                </li>
                            )
                        })
                    }
                </ul>


            </div>
        )
    }

}

const styles = {
    onblur:{
        //width:60,
        //float:'left',
        display:'flex',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        color:'#666',
        fontSize:12,
        height:40
    },
    onfocus:{
        //width:60,
        //float:'left',
        display:'flex',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        height:40,
        color:'#fa6b5b',
        fontSize:12,
        borderBottomWidth:3,
        borderBottomStyle:'solid',
        borderBottomColor:'#fa6b5b'
    }
}

